import React, { Component } from 'react';
import { Text } from 'react-native';
import { createMaterialTopTabNavigator } from 'react-navigation';
import { navOptions, BackBtn, MoreBtn } from 'bee/navigations';
import { colors, sizes } from 'bee/themes';
import { px2dp } from 'bee/utils';
import All from './All';
import Money from './Money';
import Health from './Health';
import Accident from './Accident';
import Life from './Life';

const routeConfig = {
  全部: {
    screen: All,
    tabBarLabel: '全部',
    tarBarOnPress: params => {
      params.jumpToIndex(params.scene.index);
    },
  },
  理财: {
    screen: Money,
    tabBarLabel: '理财',
    tarBarOnPress: params => {
      params.jumpToIndex(params.scene.index);
    },
  },
  健康: {
    screen: Health,
    tabBarLabel: '健康',
    tarBarOnPress: params => {
      params.jumpToIndex(params.scene.index);
    },
  },
  意外: {
    screen: Accident,
    tabBarLabel: '意外',
    tarBarOnPress: params => {
      params.jumpToIndex(params.scene.index);
    },
  },
  寿险: {
    screen: Life,
    tabBarLabel: '寿险',
    tarBarOnPress: params => {
      params.jumpToIndex(params.scene.index);
    },
  },
};

const TabNavigatorConfig = {
  // tabBarPosition: 'top',
  swipeEnabled: true,
  animationEnabled: false,
  // tabBarComponent: TabBarTop,
  tabBarOptions: {
    activeTintColor: colors[1001],
    inactiveTintColor: colors[1103],
    labelStyle: {
      fontSize: sizes.f2,
    },
    indicatorStyle: {
      borderColor: colors[1001],
      borderWidth: px2dp(2),
    },
    activeBackgroundColor: colors.white,
    inactiveBackgroundColor: colors.white,
    style: {
      height: px2dp(80),
      backgroundColor: colors.white,
    },
  },
  backBehavior: 'none',
};

const Tabs = createMaterialTopTabNavigator(routeConfig, TabNavigatorConfig);

// @flow
type Props = {
  navigation: object,
};
class Products extends Component<Props> {
  static navigationOptions = ({ navigation }) =>
    navOptions('产品列表', navOptions.TYPE_BLUE, {
      headerLeft: <BackBtn />,
      headerRight: <MoreBtn />,
    });

  render() {
    return <Tabs navigation={this.props.navigation} />;
  }
}

Products.router = Tabs.router;

export default Products;
